<template>
  <div style="padding: 20px;">
    <el-card class="box-card" style="margin-bottom: 30px;">
      <template #header>
        <div class="box_left">
          <div>
            <el-icon>
              <Tickets />
            </el-icon>
          </div>
          <div>
            数据列表
          </div>
    
        </div>
        <div>
          <el-button type="primary" class="top_button">填加</el-button>
        </div>
      </template>
    </el-card>
    
    
    
    
    <el-table :data="tableData" style="width: 100%" :border="true">
      <el-table-column prop="id" label="编号" width="100" />
      <el-table-column prop="name" label="分类名称" width="150" />
      <el-table-column prop="showStatus" label="级别" width="100">
        <template #default="scope">
          <div>
            {{ scope.row.level === 0 ? "一级" : '二级' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productCount" label="商品数量" width="100" />
      <el-table-column prop="productUnit" label="数量单位" width="100" />
    
      <el-table-column label="导航栏" width="100">
        <template #default="scope">
          <el-switch @click="change_navStatus(scope.row.id, scope.row.navStatus ? 0 : 1)"
            :value="scope.row.navStatus === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column label="是否显示" width="100">
        <template #default="scope">
          <el-switch @click="change_showStatus(scope.row.id, scope.row.showStatus ? 0 : 1)"
            :value="scope.row.showStatus === 1 ? true : false" />
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100" />
    
      <el-table-column label="设置" width="200">
        <template #default="scope">
    
    
          <el-button type="default" v-if="scope.row.level === 0" size="small" class="left_button"
            @click="checkChildList(scope.row.id)">查看下级</el-button>
    
          <el-button type="default" v-else size="small" class="left_button" disabled>查看下级</el-button>
    
    
          <el-button type="primary" size="small" class="right_button" @click="onEdit(scope.row)">转移商品</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="small" type="primary" @click="editProductCate(scope.row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="onDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    
    </el-table>
    
    <!-- 分页器 -->
    <el-pagination v-model:currentPage="pagination.pageNum" v-model:page-size="pagination.pageSize"
      :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
  


</template>

<script lang='ts' setup>
import { Tickets } from "@element-plus/icons-vue";
import { reactive, toRefs, ref } from 'vue'
import useTable from "@/hooks/useTable"
import * as api from "@/request/api"
import { useRouter } from "vue-router";
import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'


let router = useRouter()

let id = ref(0)
let {
  tableData,
  pagination,
  handleCurrentChange,
  handleSizeChange,
  getTableData
} = useTable(api.product.productCateList, {
  parentId: id
})



//更改导航栏状态
let change_navStatus = async (id: any, status: any) => {
  let form = new FormData()
  form.append('ids', id)
  form.append('navStatus', status)
  let result = await api.product.updateNavStatus(form)
  getTableData()
}
//更改显示栏状态
let change_showStatus = async (id: any, status: any) => {
  let form = new FormData()
  form.append('ids', id)
  form.append('showStatus', status)
  let result = await api.product.updateShowStatus(form)
  console.log(result);
  getTableData()
}
//删除
// let onDelete =  (id: any) => {
//   ElMessageBox.confirm(
//     '是否确认删除?',
//     '提示',
//     {
//       confirmButtonText: 'OK',
//       cancelButtonText: 'Cancel',
//       type: 'warning',
//     }
//   ).then(() => {
//     api.product.deleteCate(id)
//     getTableData()
//   })
// }

//编辑
let editProductCate = (id: any) => {
  router.push(`updateProductCate?id=${id}`)
}

//查看下级
let checkChildList = async (id: any) => {
  let result = await api.product.productCateList({ parentId: id })
  console.log(result);
  tableData.value = result.list
}


</script>


<style scoped>
:deep .el-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box_left {
  display: flex;
}

.el-pagination {
  display: flex;
  justify-content: right;
}

:deep .el-table__header{
width: 100% !important;
}

:deep .el-table__body{
  width: 100% !important;
}
</style>